<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        {include file="public/static" /}

        <link rel="stylesheet" href="__components__/eleTree/eleTree.css" media="all">
        <style>
            .layui-form-item{
                width: 60rem;
                margin: 1.5rem auto;
            }
            .layui-form-item .layui-input-inline{
                width: 40rem !important;
            }
            .x-admin-sm .layui-input, .x-admin-sm .layui-select, .x-admin-sm .layui-textarea{
                height: 2.5rem;
            }
            .ele5{
                width: 95%;
                z-index: 999999;
            }
        </style>
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label for="name" class="layui-form-label">
                            <span class="x-red">*</span>标题
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="title" name="title" value="" lay-verify="title"
                            autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="name" class="layui-form-label">
                            <span class="x-red">*</span>副标题
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="subtitle" name="subtitle" value="" lay-verify="subtitle"
                            autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="name" class="layui-form-label">
                            <span class="x-red">*</span>分类
                        </label>
                        <div class="layui-input-inline">
                            <input type="hidden" readonly id="classifyId" name="classifyId" value="" />
                            <input type="text" readonly name="classify" placeholder="选择分类" autocomplete="off" class="layui-input"
                                   value="{$Request.param.classify}" lay-verify="required" />
                            <div class="eleTree ele5" lay-filter="data5"></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="upload" class="layui-form-label">
                            <span class="x-red">*</span>封面
                        </label>
                        <div class="layui-input-inline" style="width: 20rem !important;">
                            <div class="layui-upload">
                                <span style="width:19rem;" class="layui-badge" >比例4:3，大小{$webInfo.sy_photoMaxSize}M</span>
                                <input type="hidden" lay-verify="image" id="image" name="image" value="">
                                <button style="width: 100%" type="button" id="photo" class="layui-btn">
                                    <i class="layui-icon">&#xe67c;</i>选择图片
                                </button>
                                <div class="layui-upload-list">
                                    <div id="demo"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                       <label for="name" class="layui-form-label">
                          <span class="x-red">*</span>内容
                       </label>
                       <div class="layui-input-inline">
                           <textarea id="content" name="content" lay-verify="content"></textarea>
                       </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="name" class="layui-form-label">
                            <span class="x-red">*</span>排序
                        </label>
                        <div class="layui-input-inline">
                            <input type="number" placeholder="越接近0越靠前" id="sort" name="sort" value="0" lay-verify="sort"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                  <div class="layui-form-item">
                      <label for="name" class="layui-form-label">
                          <span class="x-red">*</span>发布时间
                      </label>
                      <div class="layui-input-inline">
                          <input type="text" readonly placeholder="点击选择时间" id="time" name="time" value="" lay-verify="time"
                          autocomplete="off" class="layui-input">
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="name" class="layui-form-label">
                          <span class="x-red">*</span>状态
                      </label>
                      <div class="layui-input-inline">
                          <select name="status" id="status">
                              <option value="1" selected >启用</option>
                              <option value="0" >禁用</option>
                          </select>
                      </div>
                  </div>
                  <div class="layui-form-item">
                      <label for="L_repass" class="layui-form-label"></label>
                      <button class="layui-btn" lay-filter="add" lay-submit="">提交</button>
                  </div>
              </form>
            </div>
        </div>

        <script>
            /**创建编辑器*/
            common.tinymce("#content", 500, "{:url('Index/tinymceImgUpload')}");
            /**发布日期*/
            const date = [
                {elem: '#time', style: 'datetime', max: '23:59:59', type: 'datetime', format:'yyyy-MM-dd HH:mm:ss', trigger: 'click'}
            ];
            common.setDateControls(date);
            /**上传*/
            const data = [
                {"id":"#photo", "preview":"#demo", "val":"#image", "url":"{:url('Article/articleUpload')}"}
            ];
            common.uploadFile(data);
            /**树形组件获取分类列表*/
            const list = common.getTreeMenuList("{:url('Article/getClassify')}");
            const info = {name:"classify", className:".ele5", nodeClick:"data5",inputId:"#classifyId", multipleChoice:true, checkStrictly: true};
            common.treeMenu(list, info);
            /**验证与提交*/
            layui.use(['form', 'layer'], function() {
                $ = layui.jquery;
                var form = layui.form,
                layer = layui.layer;
                //自定义验证规则
                form.verify({
                    //标题
                    title: function(value) {
                        if (value.length < 2) {
                            return '标题不能小于2个字';
                        }
                        if(/^\d+\d$/.test(value)){
                            return '标题不能全为数字';
                        }
                    },
                    subtitle: function(value) {
                        if (value.length < 2) {
                            return '标题不能小于2个字';
                        }
                        if(/^\d+\d$/.test(value)){
                            return '标题不能全为数字';
                        }
                    },
                    image:function (value) {
                        if (value.length < 1) {
                            return '封面不能为空';
                        }
                    },
                    content:function (value) {
                        if (value.length < 1) {
                            return '内容不能为空';
                        }
                    },
                    sort:function (value) {
                        if (value.length < 0) {
                            return '排序不能为空';
                        }
                        if (value < 0) {
                            return '排序不能小于0';
                        }
                    },
                    time:function (value) {
                        if (value.length < 1) {
                            return '时间不能为空';
                        }
                    }
                });
                //监听提交
                form.on('submit(add)', function(data) {
                    var index = layer.load();
                    //发异步，把数据提交给php
                    $.ajax({
                        type:"post",
                        url:"{:url('Article/articleAdd')}",
                        data: data.field,
                        dataType: 'json',
                        success:function (data) {
                            if(data.status === 1){
                                layer.msg(data.info, {icon: 6,time:1500}, function() {
                                    /*关闭弹出层并刷新*/
                                    common.closeWindowReload();
                                });
                            }else{
                                layer.msg(data.info, {icon: 5,time:1500});
                            }
                            layer.close(index);
                        },
                        error:function (data) {
                            console.log(data);
                            layer.msg("不好意思，出现了一点问题", {icon: 5});
                        }
                    });
                    //必须加上return false，不然无法关闭iframe
                    return false;
                });
            });
        </script>
    </body>
</html>
